<template>
    <view class="gi-box" v-if="goods.name">
        <view class="gi-price">
            <view class="gpl flex align-center">
                <view class="g-pre mprice">¥</view>
                <view class="g-n mprice">
                    {{ goods.activity_price }}
                </view>

                <view class="gi-p-gray" v-if="goods.price">
                    <view class="p-pre">原价: </view>
                    <view class="g-o-num">¥{{ goods.price }}</view>
                </view>
            </view>
            <view class="sales">
                已售：{{ goods.sales || 0 }}
            </view>
        </view>

        <view class="g-tags">
            <view class="gtl">
                <view class="gti" v-for="(item, index) in goods.act_tag" :key="index">{{ item }}</view>
            </view>

        </view>
        <view class="gi-name">
            {{ goods.name }}
        </view>

        <view class="g-o">
            <view class="goi">
                <button open-type="share" class="share-btn"></button>
                <text class="cuIcon cuIcon-share"></text>
                分享
            </view>
            <view class="goi" :class="goods.collect == 2 ? 'goi-act' : ''" @click.stop="setCollect">
                <text class="cuIcon" :class="goods.collect == 2 ? 'cuIcon-favorfill' : 'cuIcon-favor'"></text>
                {{ goods.collect == 2 ? '已收藏' : '收藏' }}
            </view>
        </view>

    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
    goods: {
        type: Object,
        default: {}
    }
})

async function setCollect() {
    if (!proxy.$store.token) {
        return proxy.$go(`/pages/login/login`)
    }

    await proxy.$api('GoodsCollect', {
        id: props.goods.id,
    }, false, false)
    props.goods.collect = props.goods.collect == 1 ? 2 : 1
}

</script>

<style lang="scss" scoped>
.gi-box {
    border-top: 1px solid $bg;
    padding: 24rpx 24rpx 0;
    background: #fff;

    .gi-price {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .sales{
            font-size: 24rpx;
            color: #999;
        }
        // padding-top: 24rpx;
        .g-pre {
            font-size: 24rpx;
            font-weight: bold;
            margin-right: 8rpx;
            position: relative;
            top: 4rpx;
        }

        .g-n {
            font-weight: bold;
            font-size: 42rpx;
        }

        .gi-p-gray {

            display: flex;
            align-items: center;
            color: #999;
            font-size: 22rpx;
            text-decoration: line-through;
            position: relative;
            left: 20rpx;
            top: 4rpx;

            .p-pre,
            .g-o-num {
                font-size: 22rpx;
            }

        }
    }

    .g-tags {
        width: 100%;
        margin-top: 15rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // .gtr {
        //     padding: 4rpx 0;
        //     width: 90rpx;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     color: #fff;
        //     font-size: 20rpx;
        //     background: $main_color;
        //     border-radius: 24rpx;
        // }

        .gtl {
            flex: 1;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .gti {
                margin-bottom: 6rpx;
                max-width: 280rpx;
                // height: 34rpx;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                display: inline-block;
                font-size: 20rpx;
                background: #ffe6e6;
                border: 1px solid #ffe6e6;
                color: #f00;
                padding: 2rpx 8rpx;
                margin-right: 10rpx;
                border-radius: 4rpx;
            }
        }
    }

    .gi-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
        padding-bottom: 10rpx;
        padding-top: 10rpx;

    }

    .g-o {
        margin-top: 10rpx;
        border-top: 1px solid #f8f6f6;
        width: 100%;
        height: 90rpx;
        display: flex;

        .goi {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #000;
            position: relative;

            .cuIcon {
                font-size: 26rpx;
                margin-right: 10rpx;
            }

            .cuIcon-favorfill {
                color: $main_color;
            }

            &-act {
                color: $main_color;
            }

            .share-btn {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
                opacity: 0;
            }
        }
    }
}
</style>
